<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>交流群</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<style type="text/css">
		.content{
			overflow: auto;
			background-color: #D1EEEE;
			height:150vh;
			/*position: absolute;*/
			width: 100%;
			display: flex;
			flex-direction: column;
			padding-top: 50px;
		}
		.enter{
			position: fixed;
			bottom:0px;
			z-index: 20;
			border-top: 1px solid  #1C86EE;
			height:40px;
			width: 100%;
			/*padding-bottom: 10px;*/
			/*padding-top:10px;*/
			padding: 0	 5px;
			background-color: #009ACD;
			align-items: center;
			display: flex;

		}
		.div1{
			/*float: left;*/
			border: 1px solid #fff;
			border-radius: 3px;
			height: 30px;
			width: 80%;
			background-color: #fff;
			overflow-y:auto;
			overflow-x:hidden;


		}
		.div2{
			background-color: #006400;
			border-radius: 5px;
			width: 10%;
			height: 30px;
			border: 1px solid #006400;
			margin-left:10px;
			line-height: 30px;
			text-align: center;
			color: #fff;

		}
		.list{
			margin:10px;
		}
		.list-1{
			border-radius: 5px;
			background-color: #fff;
			/*color: #fff;*/
			border:1px solid #fff;
			max-width: 50%;
			color: #8F8F8F;
			
			overflow-y: auto;
			overflow-x: hidden;
			padding: 5px;
			word-wrap: break-word;
			word-break: normal;
		}
		.title{
			position: fixed;
			top:0;
			background-color: #009ACD;
			border-bottom: #009ACD;
			height: 40px;
			width: 100%;
			line-height: 40px;
			text-align: center;
			color: #fff;

		}
	</style>
</head>
<body style="">
	<div class="title">
		小红
	</div>
	<div class="content">
		<!-- 聊天内容 -->
		<!-- <div class="list">
			<div style="color: #030303">4343</div>
			<div class="list-1">323223</div>
		</div>
		<div class="list">
			<div>4343</div>
			<div class="list-1">323223</div>
		</div> -->

	</div>
	<div class="enter">
		<div contenteditable="true" class="div1" id="content"></div>
		<div class="div2" id = "btn">
			发送
		<div>
	</div>



	<script type="text/javascript">
		function getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) return decodeURI(r[2]); 
            return null; 
        }
        var id = getQueryString('id');
        // var toid = getQueryString('toid');
        var nickname = getQueryString('name');
        var qunname = getQueryString('qunname');
        var qunid = getQueryString('qunid');
        if(id == null || nickname == null || qunname == null || qunid == null){
        	throw SyntaxError('非法操作');
        }
        $('.title').text(qunname);


        if(window.WebSocket){
            var ws = new WebSocket('ws://127.0.0.1:8001');

            ws.onopen = function(e){
                console.log("连接服务器成功");
                ws.send(JSON.stringify({
                    'type':'link',
                    'id':id,
                    'name':name,
                    'qunid':qunid
                }));
            }
            ws.onclose = function(e){
                console.log("服务器关闭");
            }
            ws.onerror = function(){
                console.log("连接出错");
            }

            ws.onmessage = function(e){
                var data = JSON.parse(e.data);
                var time = new Date().Format("yyyy-MM-dd hh:mm:ss");
                if(data.type == 'talk'){
                	$('.content').append(childnode(data,time));
                }
                
                document.getElementById('btn').onclick = function(){
                	var writetxt = $('#content').html();
                	console.log(writetxt);
                	if(writetxt == '' ) return false;
                	$('#content').text('');
                	ws.send(JSON.stringify({
                        'type':'talk',
                        'name':name,
                        'id':id,
                        'text':writetxt,
                        'qunid':qunid
                        // 'toid':toid
                    }))
                }
                
            }
        }

        function childnode(data,time){
        	return '<div class="list"><div style="color: #030303">'+data.name + ' '+time+'</div><div class="list-1">'+data.text+'</div></div>';
        }
        Date.prototype.Format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }



	</script>


</body>
</html>